Webアプリでの画面タッチによるいろいろな操作を制限してみた

Webアプリでの画面タッチによるいろいろな操作を制限してみた

Clock Icon2021.09.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

最近、タッチ型PC端末を店頭に設置して不特定多数の人がタッチにより操作するWebアプリケーションを実装する機会があり、その中で下記のタッチ操作を無効にしたいという要望がありました。

  • ピンチズーム:2本指でタッチすると画面がズームイン/ズームアウトできてしまう。
  • スワイプ:左右にスワイプするとブラウザの「戻る」「進む」ができてしまう。
  • テキスト選択:テキストを長押しすると選択でき、そのままweb検索ができてしまう。
  • 右クリック:長押しすると右クリックメニューが出てしまう。

そこで今回は、Webアプリケーションで画面タッチによるいろいろな操作を制限(無効化)する方法を確認してみました。

ピンチズーム

ピンチズーム操作はJavaScript(TypeScript)で以下の記述をすれば制限可能です。

const touchHandler = (event: any) => {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
};
document.addEventListener('touchstart', touchHandler, {
  passive: false
});

タッチイベントタイプのtouchstartのうち2点以上のタッチによるアクションをpreventDefault()により無効化しています。

詳細については下記エントリでもまとめています。

スワイプ

スワイプ操作はJavaScript(TypeScript)で以下の記述をすれば制限可能です。

document.addEventListener(
  'touchmove',
  (event: any) => {
    event.preventDefault();
  },
  { passive: false },
);

タッチイベントタイプのtouchmoveのアクションをpreventDefault()により無効化しています。

右クリックメニューを開く

右クリックメニューを開く操作はJavaScriptで以下の記述をすれば制限可能です。

document.oncontextmenu = () => {
  return false;
};

contextmenuイベント(右クリック)時の戻り値をfalseにすることにより、右クリックメニューを開けなくしています。

テキスト選択

テキスト選択操作はCSSで以下の記述をすれば制限可能です。

body {
  user-select: none;
}

おわりに

Webアプリケーションで画面タッチによるいろいろな操作を制限(無効化)する方法を確認してみました。

今回のような制御をするくらいならWebアプリではなくネイティブアプリで実装すれば良さそうですが、プロジェクトのメンバーのスキルセットや開発期間などによってはWebアプリによる実装とせざるを得ない場合もあります。そのような時にかんたんに制御機能が追加できるのは良いですね。

参考

以上

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.